<!DOCTYPE html>
<html class="no-js">

<head>
	<meta charset="utf-8">
	<title>盆景预约</title>
	<meta name="description" content="">
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
	<meta http-equiv="cleartype" content="on">
	<meta name="format-detection" content="telephone=no">

	<link rel="stylesheet" type="text/css" href="./css/common.css">
	<link rel="stylesheet" type="text/css" href="./css/index.css">
	<link rel="stylesheet" type="text/css" href="./css/font.css">
	<link rel="stylesheet" type="text/css" href="./css/date.css">
</head>
<body>
<div class="wraper">
	<div class="head clearfix">
		<a href="#" class="iconfont icon-fanhui72 pull-left"></a>
		<span class="head-name pull-left">预约篮</span>
		<a href="#" class="pull-left text-right" id="edit">修改</a>
	</div>
	<div class="tb-mode">
		<div class="white-block">
			<div class="tb-cell info-left">
				<div class="image-box">
					<img src="./images/flower.jpg"/>
				</div>
			</div>
			<div class="tb-cell vertical-top">
				<p class="text-green goods-name">[树植盆景] 发财树</p>
				<p class="sub-contain">长期摆放: 1.5 元/盆/天</p>
				<p class="sub-contain">购买数量：2 盆</p>
				<p class="sub-contain">小计：<span class="text-red">￥130.5元</span></p>
				<div class="quantity tb-mode hide">
					<span class="iconfont icon-iconfont55 tb-cell" data-status="sub"></span>
					<input type="number" value="1" data-status="input" autocomplete="on">
					<span class="iconfont icon-jia tb-cell" data-status="plus"></span>
				</div>
			</div>
		</div>
		<a href="#" class="tb-cell delete-list">删除</a>
	</div>
	<div class="tb-mode">
		<div class="white-block">
			<div class="tb-cell info-left">
				<div class="image-box">
					<img src="./images/tree.jpg"/>
				</div>
			</div>
			<div class="tb-cell vertical-top">
				<p class="text-green goods-name">[树植盆景] 发财树</p>
				<p class="sub-contain">长期摆放: 1.5 元/盆/天</p>
				<p class="sub-contain">购买数量：2 盆</p>
				<p class="sub-contain">小计：<span class="text-red">￥130.5元</span></p>
				<div class="quantity tb-mode hide">
					<span class="iconfont icon-iconfont55 tb-cell" data-status="sub"></span>
					<input type="number" value="1" data-status="input" autocomplete="on">
					<span class="iconfont icon-jia tb-cell" data-status="plus"></span>
				</div>
			</div>
		</div>

		<a href="#" class="tb-cell delete-list">删除</a>
	</div>
	<div class="fixed-accounts">
		<div class="tb-mode">
			<div class="tb-cell">
				预计总费用 <span class="text-red">271.0元</span>
			</div>
			<div class="tb-cell">
				<div class="pull-right"><a class="btn" href="#">立即预约</a></div>
			</div>
		</div>
	</div>
	<div class="nav">
		<a href="./index.html" class="nav-list"><span class="iconfont icon-home"></span><span>首页</span></a>
		<a href="./classify.html" class="nav-list"><span class="iconfont icon-fenlei"></span><span>全部分类</span></a>
		<a href="./car.html" class="nav-list"><span class="iconfont icon-shopcar"></span><span>预约篮</span><span class="tips">88</span></a>
		<a href="./center.html" class="nav-list current"><span class="iconfont icon-gerenzhongxin"></span><span>个人中心</span></a>
	</div>
</div>
<script src="./js/jquery-2.1.0.min.js"></script>
<script src="./js/date.js"></script>
<script src="./js/iscroll.js"></script>
<script>
	var nav_h = $('.nav').height();
	$('.wraper').css('paddingBottom',nav_h+8);
	var img_h = $('.image-box img').height();
	$('.image-box img').css('marginTop',-img_h/2);

	$(document).ready(function () {
		$(document).on('click','#edit',function(){
			$('.sub-contain').hide();
			$('.quantity').addClass('tb-show');
			$('.delete-list').addClass('cell-show');
			$('.btn').addClass('gray-btn');
			$(this).html('完成');
			$(this).attr('id','complete');
		});
		$(document).on('click','#complete',function(){
			$('.sub-contain').show();
			$('.quantity').removeClass('tb-show');
			$('.delete-list').removeClass('cell-show');
			$('.btn').removeClass('gray-btn');
			$(this).html('修改');
			$(this).attr('id','edit');
		})
	});
</script>
</body>
</html>
